<template>
	<view class="black97-bj">
		<!-- 多图轮播 -->
		<view  class="wid-100 overflow-hidden position-relative">
			<swiper @change="change" :style="{height:height+'px'}">
				<swiper-item v-for="(item, index) in product.pics" :key="index">
					<view class="swiper-item">
						<image :src="item"  mode="widthFix" lazy-load></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="position-absolute swiper-dots white-zt font-26 border-r z-index55 line-h45 a-center">
				<view>{{current+1}}</view>
				<view>/</view>
				<view>{{length}}</view>
			</view>
		</view>
		<!-- 价格信息 -->
		<view class="center710 white-bj border-r-20 pad-l-20 pad-r-20 pad-t-30 pad-b-40 box-sizing shopiInfo position-relative">
			<view class="a-center j-sp">
				<view class="a-end">
					<view class="font-w-b font-30 activeColor">
						<text>¥</text>
						<text class="font-40">{{product.sell_price}}</text>
						<text>起</text>
					</view>
					<view class="text-dec-line  black60-zt font-26 mar-left20">¥{{product.market_price}}</view>
				</view>
				<view class="black50-zt font-24">{{processing(product.sales)}}人购买</view>
			</view>
			<view class="mar-top10 youhui"><text class="activeColor border-r-10 font-22 pad-t-5 pad-b-5 pad-l-r-30" v-if="product.tag!=''">{{product.tag}}</text></view>
			<view class="font-w-b font-30 line-h40 mar-top30">{{product.name}}</view>
			<view class="font-24 black60-zt text-overflow mar-top10">{{product.sub_name}}</view>
		</view>
		<!-- 选择规格 -->
		<view class="center710 white-bj border-r-20 pad-l-20 pad-r-20 pad-t-30 pad-b-30 box-sizing a-center j-sp mar-top20">
			<view class="font-28">已选</view>
			<view class="a-center j-sp spec-show" @tap="openTan('guige','shop')">
				<view class="font-24  black40-zt">{{spec}}</view>
				<view class="icon-jinru black40-zt"></view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="wid-100 white-bj mar-top30 pad-30 overflow-hidden box-sizing" v-if="product.tj_shop!=null">
			<view class="font-26 font-w-b">购买该商品的人还购买了</view>
			<scroll-view scroll-x="true" class="ljm-swiper mar-top30">
				<m-shop-list :lists="product.tj_shop"></m-shop-list>
			</scroll-view>
		</view>
		<!-- 详情页 -->
		<view class="detail mar-top30 white-bj wid-100 pad-b-20 pad-t-30">
			<view class="d-a-j-c">
				<view class="t1"></view>
				<view class="t2"></view>
				<view class="t0 font-32 font-w-b mar-left10 mar-right10">服务详情</view>
				<view class="t2"></view>
				<view class="t1"></view>
			</view>
			<view class="wid-100 white-bj pad-b-30 pad-t-30">
				<view class="center">
					<rich-text :nodes="product.detail"></rich-text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="heightTop"></view>
		<view class="a-center white-bj position-fixed p-bottom foot-box wid-100">
			<view class="a-center j-sp">
				<view class="d-a-j-c left">
					<view class="flex-1 d-a-j-c flex-column" @tap="open('kefu')">
						<view class="icon-wangwang"></view>
						<view class="font-20 line-h32">客服</view>
					</view>
				</view>
				<view class="right font-22 font-w-b a-center">
					<view class="car main-bj" @tap="openTan('guige','car')">立即购买</view>
					<view  class="shop" @tap="openTan('shop','shop')">余额购买(¥{{userInfo.money}})</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="position-fixed p-bottom p-left p-right p-top black100-50" v-if="showLoding" @tap="close"></view>
		<view class="wid-100  white-bj fuwu-foot position-fixed p-bottom z-index99 box-sizing overflow-hidden" :style="{height:heightFoot+'px'}" v-if="showLoding">
			<view class="position-relative">
				<view class="text-center font-30 font-w-b">{{footTitle}}</view>
				<view class="icon-guanbi position-absolute p-right p-top font-28" @tap="close"></view>
			</view>
			<!-- 充值 -->
			<view class="white-bj mar-top60" v-if="type=='recharge'">
				<view class="a-center font-28 line-h100 recharge-box overflow-hidden">
					<scroll-view scroll-x="true" class="ljm-swiper">
						<block v-for="(item,index) in recharge" :key="index">
							<view class="d-inline-block recharge-item position-relative text-center border-r-20" :class="{'active':item.id==rechargeId.id}" @tap="rechargeClick(item,index)">
								<view class="font-32 font-w-b">{{item.money}}元</view>
								<view class="font-24 black60-zt daozhang mar-top15">到账{{item.money+item.give}}元</view>
								<view class="deliver white-zt position-absolute">赠送{{item.give}}元</view>
							</view>
						</block>
					</scroll-view>
				</view>
				<radio-group @change="changePay" class="pay-box">
					<view class="item a-center j-sp mar-top60" v-for="(item,index) in paylist" :key="index" v-if="item.id!=2">
						<view class="a-center">
							<view class="img border-r-5 overflow-hidden"><image :src="item.pic" mode="widthFix" lazy-load></image></view>
							<view class="mar-left15 ">
								<view class="font-w-b font-28">{{item.name}}</view>
							</view>
						</view>
						<label class="radio"><radio :value="item.id" :checked="checked==item.id" style="transform: scale(0.77);"/></label>
					</view>
				</radio-group>
				<view class="bottom position-fixed">
					<view class="font-28 chengse-bj border-r wid-100 line-h80 white-zt text-center" @tap="open('yue')">充值</view>
				</view>
			</view>
			<!-- 规格 -->
			<view class="mar-top50 guige-box wid-100" v-else-if="type=='guige'">
				<view class="d-flex top wid-100">
					<view class="pic border-r-10 overflow-hidden"><image :src="formData.pic" mode="widthFix" lazy-load></image></view>
					<view class="mar-left20">
						<view class="font-28 activeColor font-w-b line-h55">¥<text class="font-40">{{formData.sell_price}}</text></view>
						<view class="font-24 black60-zt mar-top15 line-h35">已选规格: {{formData.guigeData}}</view>
					</view>
				</view>
				<view class="guige-content">
					<view class="item" v-for="(item,index) in product.guigeData" :key="index">
						<view class="font-24 font-w-b mar-top50">{{item.title}}</view>
						<view class="font-22 a-center flex-wrap">
							<view class="lable border-r-5 line-h50 mar-right20 mar-top20" v-for="(item1,index1) in item.items" :key="index1" @tap="Click(item.k,index,item1.k,index1)" :class="{'main-bj':item1.is==1}">{{item1.title}}</view>
						</view>
					</view>
				</view>
				<view class="sum a-center j-sp mar-top60" v-if="product.type==2">
					<view class="font-26 font-w-b">数量:</view>
					<view class="a-center">
						<view class="jian" @tap="reduce">-</view>
						<view class="number">{{formData.sum}}</view>
						<view class="jia" @tap="add">+</view>
					</view>
				</view>
				<view class="bottom position-fixed">
					<view class="font-28 main-bj border-r wid-100 line-h80 white-zt text-center" @tap="open('order')">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mShopList from "@/pagesC/pages_com/m-shop-list.vue"
	import login from '@/common/login.js'
	export default {
		components:{
			mShopList
		},
		data() {
			return {
				id:undefined,
				height:300,
				current:0,
				user_id:undefined,
				length:3,
				showLoding:false,
				heightFoot:0,
				footTitle:"请选择规格",
				spec:'请选择服务规格',
				product:{},
				type:"",
				checked:1,
				formData:{
					sum:1,
					sell_price:0,
					guigeData:"",
					pic:"",
					proid:0,
					guige_id:undefined,
					market_price:0
				},
				guigeJson:{},
				paylist:[],
				rechargeId:{},
				recharge:[],
				userInfo:{
					money:0
				},
				isXianjin:true
			}
		},
		onLoad(e) {
			this.id=parseFloat(e.id)
			this.user_id=parseFloat(this.$user.state.userId)
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					this.height=res.windowWidth
				}
			})
			this.GetShop()
			this.getPayList()
			this.GetRechargeSet()
			
		},
		onPullDownRefresh() {
			this.GetShop()
			this.getPayList()
			this.GetRechargeSet()
			//关闭下拉刷新
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		onShow() {
			if(this.user_id>0){
				this.GetUserInfo()
			}
		},
		methods: {
			//提交余额充值
			async AddRechargerder(){
				let payData={}
				this.paylist.forEach(item=>{
					if(item.id==this.checked){
						payData=item
					}
				})
				const two={
					aid:1,
					mid:parseFloat(this.user_id),
					money:this.rechargeId.money,
					give:this.rechargeId.give,
					give_score:this.rechargeId.give_score,
					paytypeid:payData.id,
					paytype:payData.name,
					platform:"小程序"
				}
				await this.$api.AddRecharge(two).then(res=>{
					if(res.code==0){
						const hhh={
							payorderid:res.data.payorderid,
							ordernum:res.data.ordernum,
							orderid:res.data.orderid
						}
						this.$api.WxPayV3Api(hhh).then(element=>{
							uni.requestPayment({
								provider:"wxpay",
								timeStamp:element.data.timestamp,
								nonceStr:element.data.noncestr,
								package:element.data.package,
								signType:'MD5',
								paySign:element.data.sign,
								success:(item)=>{
									if(item.errMsg=="requestPayment:ok"){
										uni.showToast({
											icon:"none",
											title:"充值成功！",
											duration:2000
										})
										uni.showLoading({
											title:"支付中..."
										})
										setTimeout(()=>{
											this.GetUserInfo()
											uni.hideLoading()
											this.close()
										},2000)
									}
								}
							})
						})
					}
				})
			},
			//进入店铺/
			open(type){
				switch (type){
					case "kefu":
						uni.navigateTo({
							url:'/pagesB/webH5/webH5?url='+this.business.kfurl
						})
					break;
					case "yue":
						if(this.checked<=0){
							uni.showToast({
								icon:'none',
								title:'请选择支付方式！',
								duration:2000
							})
							return
						}
						if(this.rechargeId.id<=0){
							uni.showToast({
								icon:'none',
								title:'请选择充值金额！',
								duration:2000
							})
							return
						}
						this.AddRechargerder()
					break;
					case "order":
						if(this.formData.guigeData==""){
							uni.showToast({
								icon:'none',
								title:'请选择服务规格！',
								duration:2000
							})
							return
						}
						let stock=true
						//判断库存是否充足
						this.product.gui_ge_list.forEach(item=>{
							if(item.id==this.formData.guige_id){
								if(item.stock<this.formData.sum){
									stock=false
								}
							}
						})
						if(!stock){
							uni.showToast({
								icon:'none',
								title:'这个规格库存不足，请另选一个！',
								duration:2000
							})
							return
						}
						
						if(parseFloat(uni.getStorageSync("userId"))>0){
							const one={
								pic:this.product.pic,
								name:this.product.name,
								guige_id:this.formData.guige_id,
								guige_name:this.formData.guigeData,
								proid:this.id,
								sell_price:this.formData.sell_price,
								market_price:this.formData.market_price,
								paytypeid:this.formData.paytypeid,
								mid:parseFloat(uni.getStorageSync("userId")),
								sum:this.formData.sum,
								type:this.product.type,
								scoredkmaxset:this.product.scoredkmaxset,
								scoredkmaxval:this.product.scoredkmaxval,
								guigeData:this.guigeJson
							}
							uni.navigateTo({
								url:'/pagesB/shopOrder/shopOrder?id='+JSON.stringify(one)
							})
						}else{
							uni.showToast({
								icon:'none',
								title:'登入超时！正在重新登入！',
								duration:2000
							})
							setTimeout(function(){
								login.Login()
							},1000)
						}
					break;
				}
			},
			//打开弹窗
			openTan(type,shopTyoe){
				switch (type){
					case "shop":
					if(parseFloat(this.userInfo.money)>parseFloat(this.product.sell_price)){
						this.footTitle="请选择规格"
						this.type="guige"
						this.formData.paytypeid=2
						this.formData.pic=this.product.pic
						this.formData.sell_price=this.product.sell_price
						this.heightFoot=600
						this.isXianjin=false
					}else{
						this.footTitle="请选择充值套餐"
						this.type="recharge"
						this.heightFoot=300
					}
					break
					case "guige":
					this.footTitle="请选择规格"
					this.type="guige"
					this.formData.paytypeid=1
					this.formData.pic=this.product.pic
					this.formData.pic=this.product.pic
					this.formData.sell_price=this.product.sell_price
					this.heightFoot=600
					this.isXianjin=true
					break
				}
				this.showLoding=true
			},
			//关闭弹窗
			close(){
				this.type=""
				this.showLoding=false
			},
			//点击选择充值
			rechargeClick(id,index){
				this.rechargeId=id
			},
			//点击选择在规格
			Click(k1,index1,k2,index2){
				//使用循环设置当前规格组中规格值未选中is=0
				this.product.guigeData[index1].items.forEach(item=>{
					item.is=0
				})
				//未点击的规格值更改未选中状态is=1
				this.product.guigeData[index1].items[index2].is=1
				//设置一个变量，用来计算当前选中了多少个规格组
				let cur=0
				let ks=[]
				this.product.guigeData.forEach(item=>{//循环所有的规格组
					let index=false//设置变量来确定当前规格组中的规格值是否有被选中的，选中就为true
					item.items.forEach(item1=>{//循环当前规格值
						//判断如歌规格值被选中了表示为true
						if(item1.is==1){
							index=true
							ks.push(item1.k)
						}
					})
					//循环当前规格组的所有规格值后，判断是否有被选中的规格值，有着为cur+1
					if(index==true){
						cur++
					}
				})
				//判断是否所有的规格组都有被选中,如果没有则结束
				if(this.product.guigeData.length!=cur){ return }
				//循环比对当前选中的规格数据
				this.product.gui_ge_list.forEach(item=>{
					if(item.ks==ks.toString(",")){
						if(item.pic!=""){
							this.formData.pic=item.pic
						}
						this.formData.guige_id=item.id
						this.formData.sell_price=item.sell_price
						this.formData.guigeData=item.name
						this.formData.market_price=item.market_price
						this.guigeJson=item
					}
				})
			},
			//获取充值信息
			async GetRechargeSet(){
				const one={
					id:1
				}
				await this.$api.GetRecharge(one).then(res=>{
					if(res.data.list!=null){
						this.recharge=JSON.parse(res.data.list.givedata)
						this.recharge.forEach((item,index)=>{
							item.id=index+1
							item.money=parseFloat(item.money)
							item.give=parseFloat(item.give)
							item.give_score=parseFloat(item.give_score)
						})
					}
					console.log(this.recharge)
				})
			},
			//获取商品详情
			async GetUserInfo(){
				const one={
					mid:this.user_id,
					aid:1
				}
				await this.$api.UserInfo(one).then(res=>{
					this.userInfo=res.data
				})
			},
			//获取商品详情
			async GetShop(){
				const one={
					id:this.id,
					mid:this.user_id,
					aid:1
				}
				await this.$api.GetShopInfo(one).then(res=>{
					res.data.detail = res.data.detail.replace(/<img/gi, "<img class='richImg'");
					this.product=res.data
					this.product.pics=this.product.pics.split(",")
					this.length=this.product.pics.length
					this.product.guigeData=JSON.parse(res.data.guige)
					this.formData.pic=this.product.pic
				})
			},
			//增加数量
			add(){
				if(this.formData.sum<=99){
					this.formData.sum++
				}else{
					this.formData.sum=99
					uni.showToast({
						icon:"none",
						title:"不超过99件商品！"
					})
				}
			},
			//减少数量
			reduce(){
				if(this.formData.sum<=1){
					this.formData.sum=1
					uni.showToast({
						icon:"none",
						title:"不可能再减少了！"
					})
				}else{
					this.formData.sum--
				}
			},
			//获取支付列表
			async getPayList(){
				const one={
					aid:1,
					state:1
				}
				await this.$api.GetPayList(one).then(res=>{
					this.checked=res.data.list[0].id
					this.paylist=res.data.list
				})
			},
			
			//数字处理
			processing(e){
				if(e>10000){
					const sum=Math.floor((e/10000)*100)/100
					return sum+'w'
				}else {
					return e
				}
			},
			//监听选择支付方式
			changePay(e){
				this.checked=parseFloat(e.detail.value)
			},
			//监听轮播组件
			change(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	}  
	img{
		width: 100%;
		display: block;
	}
	image{
		width: 100%;
		display: block;
	}
	.swiper-dots{
		background-color: rgba(0, 0, 0, 0.5);
		padding: 0 30rpx;
		right: 20rpx;
		bottom: 55rpx;
	}
	.shopiInfo{
		margin-top: -30rpx;
		.youhui{
			text{
				background-color:#fcf3ee;
			}
		}
	}
	.spec-show{
		width: 590rpx;
	}
	
	.detail{
		width: 100%;
		.t1{
			width: 6px;
			height: 6px;
			background-color: rgba(253,74,70,.2);
			transform: rotate(45deg);
			margin: 0 2px;
		}
		.t2{
			width: 9px;
			height: 9px;
			background-color: rgba(253,74,70,.4);
			transform: rotate(45deg);
			margin: 0 5px;
		}
		.richImg {
		    width: 100% !important;
		    height: auto !important;
		}
	}
	.fenge{
		width: 7rpx;
		height: 22rpx;
		border-radius: 100rpx;
		margin-right: 8rpx;
	}
	.foot-box{
		padding: 30rpx 20rpx;
		z-index: 1;
		.left{
			width: 200rpx;
		}
		.right{
			width: 510rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #ffffff;
			text-align: center;
			justify-content: right;
			justify-items: right;
			.car{
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				width: 250rpx;
			}
			.shop{
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
				background-color: #e5353f;
				width: 250rpx;
			}
		}
	}
	.fuwu-foot{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 50rpx;
		.recharge-box{
			.recharge-item{
				width: 220rpx;
				padding: 35rpx 0;
				border: 2rpx solid #e6e6e6;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0rpx;
				}
				&.active{
					background: #fdf0e1;
					border: 2rpx solid #f37c4d;
					color: #ff4730;
					.daozhang{
						color: #ff4730 !important;
					}
				}
				.deliver{
					background: linear-gradient(270deg, #f37c4d 0%, #ff4730 100%);
					border-top-left-radius: 100rpx;
					border-top-right-radius: 100rpx;
					border-bottom-right-radius: 100rpx;
					padding: 6rpx 13rpx;
					top: 0;
					right: -20rpx;
					font-size: 18rpx;
					line-height: 18rpx;
				}
			}
		}
		.guige-box{
			.top{
				.pic{
					width: 160rpx;
					height: 160rpx;
				}
			}
			.guige-content{
				max-height: 600rpx;
				overflow-y: auto;
				.item{
					.lable{
						background-color: #f4f4f4;
						color: #333333;
						padding: 0 30rpx;
					}
				}
				
			}
			.sum{
				.jian,.jia{
					text-align: center;
					width: 70rpx;
					height: 50rpx;
					font-size: 24;
					line-height: 50rpx;
					background-color: #f7f9f8;
					border-radius: 5rpx;
				}
				.number{
					width: 80rpx;
					text-align: center;
					font-size: 26rpx;
				}
			}
		}
		.bottom{
			width: 660rpx;
			bottom: 50rpx;
			.cart{
				background-color: #7f72fa;
			}
		}
	}
	.pay-box{
		.item{
			.img{
				width: 45rpx;
				height: 45rpx;
			}
			label{
				padding-right: 0rpx;
			}
		}
	}
</style>
